<style>
#two-row {
  margin-top: 10px;
}
#searchbutton {
  margin-left: 25px;
}
#newtext {
  margin-left: 25px;
}
#page {
  margin-top: 10px;
  float: right;
}
#textarea {
  width: 100%;
  height: 80px;
  border: 1px solid gainsboro;
  border-radius: 4px;
}
</style>


<template>
  <div>
    <!-- 顶部信息卡片 -->
    <Card class="mb-10">
      <Row id="header">
        <Col span="12">
          <h3>类型类型</h3>
        </Col>
        <Col span="12" class="text-right">
          <component2>
            <Button type="primary" @click="addflower" class="mr-10">新建</Button>
          </component2>
          <component2>
            <Button type="error" @click="delflower">删除</Button>
          </component2>
        </Col>
      </Row>
    </Card>

    <!-- Modal对话框 -->
    <Modal v-model="modal" :title="fromtitle" @on-cancel="closeSaveItem">
      <Form ref="formData" :model="formData" :label-width="80">
        <Input type="hidden" v-model="formData.fid" clearable placeholder="请填写类型"></Input>
        <FormItem label="类别名称">
          <Input v-model="formData.fName" clearable placeholder="请填写类型名称"></Input>
        </FormItem>
        <FormItem label="类别名称">
          <textarea id="textarea" v-model="formData.detail" clearable placeholder="请填类型简介"></textarea>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="default" @click="closeSaveItem">关闭</Button>
        <Button type="primary" @click="saveItemOk">确认</Button>
      </div>
    </Modal>

    <!-- 删除对话框 -->
    <Modal v-model="modal2" width="360">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>确认删除吗</span>
      </p>
      <div style="text-align:center">
        <p>删除后不可恢复是否继续删除</p>
      </div>
      <div slot="footer">
        <Button type="error" size="large" long :loading="modal_loading" @click="del">删除</Button>
      </div>
    </Modal>

    <!-- 表格数据 -->
    <Card>
      <Row>
        <span id="newtext">关键字：</span>
        <Input placeholder="请输入类型名" v-model.trim="searchText" style="width:200px;margin-right:20px;"></Input>
        <Button type="primary" id="searchbutton" @click="search">搜索</Button>
      </Row>
      <Row id="two-row">
        <!-- 数据表格 -->
        <Table
          border
          :columns="columns"
          :data="data"
          @on-selection-change="selectOption"
          id="table"
        ></Table>
        <Page
          class="mt-10 text-right"
          :total="total"
          :current="currentPage"
          :page-size="pageSize"
          @on-change="changePage"
          @on-page-size-change="changeSize"
          show-sizer
          show-total
        />
      </Row>
    </Card>
  </div>
</template>
<script>
import { hasOneOf } from "@/libs/tools";
import { getAllType, addType, delType, delTypes, updateType } from "@/api/data";
export default {
  data() {
    return {
      searchText: "", // 搜索内容初始化
      modal: false, //添加编辑框
      modal2: false, //删除框
      isadd: true, //判断当前点击的保存是否为添加保存
      DelFlowerIdArray: [], //点击单选框保存当前数据id
      total: 0, //数据总数
      formData: {}, //存放添加数据内容
      fromtitle: "添加类型", //对话框标题
      pageSize: 10, //每页显示条数
      currentPage: 1, //当前页码
      inlinedel: true, //行内删除
      indexid: "", //行内id
      cityList: [], //下拉选择器
      model1: "",
      columns: [
        //表头信息
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "类别",
          key: "fName"
        },
        {
          title: "简介",
          key: "detail"
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.isadd = false; //判断是否为新建
                      this.modal = true;
                      this.fromtitle = "编辑类型信息";
                      let getData = this.data[params.index];
                      this.formData = getData;
                    }
                  }
                },
                "编辑"
              )
            ]);
          }
        }
      ],
      // 存放数据数组
      data: []
    };
  },
  methods: {
    async pageInit() {
      getAllType(this.pageSize, this.currentPage, this.searchText)
        .then(res => {
          this.data = res.data.result.data; //往数据数组添加内容
          this.total = res.data.result.count; //数据总条数
        })
        .catch(err => {
          console.log(err);
        });
    },
    //搜索
    search() {
      this.currentPage = 1;
      this.pageInit();
    },
    //点击添加
    addflower() {
      this.formData = {};
      this.isadd = true;
      this.modal = true;
      this.fromtitle = "添加类型";
    },
    //选中项时触发
    selectOption(selection, row) {
      this.DelFlowerIdArray = [];
      for (let item of selection) {
        this.DelFlowerIdArray.push(item.fid);
      }
    },
    //点击删除
    delflower() {
      var DelFlowerIdArray = this.DelFlowerIdArray;
      if (DelFlowerIdArray.length < 1) {
        this.$Message.warning("请选中要删除的行");
        return;
      } else {
        this.modal2 = true;
        this.inlinedel = false;
      }
    },
    //点击删除弹出的确认按钮
    del(index) {
      if (true) {
        //顶部删除按钮执行方法
        var ids = this.DelFlowerIdArray;
        delTypes("/flowerType/deleteFlowerTypes", ids)
          .then(res => {
            console.log(JSON.stringify(res));
            this.modal2 = false;
            this.DelFlowerIdArray = [];
            this.$Message.success("删除成功");
            this.pageInit();
          })
          .catch(err => {
            this.modal2 = false;
            this.$Message.error("删除失败");
            this.DelFlowerIdArray = [];
            this.pageInit();
          });
      }
    },
    //新建编辑对话框中的确定
    saveItemOk() {
      var that = this;
      var formData = this.formData;
      //console.log(JSON.stringify(formData))
      if (!formData.fName) {
        this.$Message.warning({
          content: "请填写类型"
        });
        return;
      }
      if (!formData.detail) {
        this.$Message.warning({
          content: "请填写简介"
        });
        return;
      } else if (this.isadd) {
        addType(this.formData)
          .then(res => {
            this.$Message.success({
              content: "添加类型成功"
            });
            that.pageInit();
            that.modal = false;
            that.formData = [];
          })
          .catch(err => {
            this.$Message.error({
              content: "添加类型失败"
            });
            that.pageInit();
            that.modal = false;
            that.formData = [];
            console.log(err);
          });
      } else {
        updateType(this.formData)
          .then(res => {
            var that = this;
            this.$Message.success({
              content: "修改信息成功"
            });
            that.modal = false;
            that.pageInit();
          })
          .catch(err => {
            console.log(err);
            this.$Message.error({
              content: "修改信息失败"
            });
            that.modal = false;
            that.pageInit();
          });
      }
    },
    //新建编辑对话框中的取消
    closeSaveItem() {
      this.modal = false;
      this.$Message.info("您已取消");
      this.pageInit();
    },
    //改变页码
    changePage(page) {
      this.currentPage = page;
      this.pageInit();
    },
    //改变每页总条数
    changeSize(size) {
      this.pageSize = size;
      this.currentPage = 1;
      this.pageInit();
    }
  },
  mounted() {
    // 页面初始化
    getAllType(10, 1).then(res => {
      console.log("----" + JSON.stringify(res));
      if (res.data.success) {
        this.data = res.data.result.data; //往数据数组添加内容
        this.total = res.data.result.count; //数据总条数
        this.pageInit();
      } else if (res.data.errorMsg) {
        this.$Message.warning({
          content: res.data.errorMsg
        });
      }
    });
  }
};
</script>
